<template>
	<view>
		<view style="padding-bottom: 180rpx;">
			<view class="mainpadding_top ffffff">
				<view class="flexbetween">
					<view class="titletext hei_text bold">規格標題</view>
				</view>
				<view class="bghui mainpadding_top radius">
					<input type="text" class="hei_text main_size bold" placeholder="請輸入規格標題" v-model="dataAll.name">
				</view>
				<view class="margin_top flexbetween" @click="checkcolorIndex=index;jumpurl('/pages/workbench/yanseb')">
					<view class="titletext bold hei_text">顔色</view>
					<view class="flexright">
						<view class="radius margin_right1" v-show="dataAll.font_color" style="width: 50rpx;height: 50rpx;" :style="[{ backgroundColor: dataAll.font_color }]"></view>
						<view class="main_size bold hei_text margin_right1">{{dataAll.font_color || "請選擇"}}</view>
							<u-icon name="arrow-right" color="#333" size="16"></u-icon>
					</view>
				</view>
				<view class="flexbetween margin_top">
					<view class="titletext hei_text bold">必選數量</view>
					<u-radio-group v-model="dataAll.fh" placement="row" circle>
						<u-radio activeColor="#feb800" :customStyle="{marginRight: '30rpx'}" label="必選" :name="1"></u-radio>
						<u-radio activeColor="#feb800" label="選填" :name="2"></u-radio>
						<!-- <u-radio activeColor="#feb800" :customStyle="{marginRight: '30rpx'}" label="等於" :name="1"></u-radio>
						<u-radio activeColor="#feb800" label="大於等於" :name="2"></u-radio> -->
					</u-radio-group>
				</view>
				<view class="bghui mainpadding_top radius">
					<input type="number" class="hei_text main_size bold" placeholder="請輸入必選數量(0為非必選)"
						v-model="dataAll.num">
				</view>
				<view class="flexbetween margin_top">
					<view class="titletext hei_text bold">新增規格内容</view>
				</view>
				<view class="flexleft margin_top">
					<view class="names">
						<input type="text" placeholder="請輸入規格内容" v-model="arrtName">
					</view>
					<view class="add" @click="addAttr(arrtName)">添加</view>
				</view>
				<!-- 属性 -->
				<view class="bghui radius mainpadding_top" v-for="(value,i) in dataAll.content" :key="i">
					<view class="flexleft">
						<view class="itemimgBox flexcenter margin_right2" v-for="(ite,it) in value.image_arr"
							:key="it">
							<!-- 已上传 -->
							<image class="listleftimg radius" :src="ite" mode=""></image>
							<view class="deleteimg" @click="deleimage(it,value.images,value.image_arr)"></view>
						</view>
						<view class="itemimgBox flexcenter margin_right2"
							@click="uploadImg(value.images,value.image_arr,1)" v-if="value.image_arr.length<1">
							<!-- 未上传 -->
							<image class="listleftimg radius" src="@/static/image/system/upimg.png" mode=""></image>
						</view>
						<view class="">
							<view class="hei_text titletext bold">{{value.name}}</view>
							<view class="mainpadding_top ffffff radius flexbetween">
								<view class="flexleft">
									<view class="hui_text main_size bold" style="min-width: 100rpx;">價格：</view>
									<input type="number" class="huang_text main_size bold" v-model="value.price">
								</view>
								<view @click="delAttr(value,i)">
									<u-icon name="trash" color="#ff0000" size="16"></u-icon>
								</view>
							</view>
						</view>
					</view>
					


				</view>
			</view>
			<view class="mainpadding posibottom" style="bottom: 0;">
				<view class="submitbtn" @click="confirm">確認</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				arrtName: "", //属性名称
				dataAll: {
					name: "", //规格标题
					font_color:"",
					num: "", //必选数量
					content: [], //属性列表
					fh:1
				},
				listid:"",
			}
		},
		onLoad(options) {
			if(options.id){
				this.listid = options.id
				uni.setNavigationBarTitle({
					title:"編輯規格範例"
				})
				this.getDetail()
			}
			uni.$on("checkColor", data => {
				this.dataAll.font_color = data
				console.log(data, "選擇顔色");
			})
		},
		onUnload() {
			uni.$off("checkColor")
		},
		methods: {
			getDetail(){
				this.http.request("/api/goods/ggmbDetail", 'GET', {
					id:this.listid
				}).then(res=>{
					let data = res.data
					this.dataAll.name = data.name
					this.dataAll.num = data.num
					this.dataAll.font_color = data.font_color
					this.dataAll.fh = Number(data.fh)
					let arr = data.content_text
					let arr1 = []
					arr.forEach(item=>{
						console.log(item);
						arr1.push({
							images:item.image?item.image.split(','):[],
							image_arr:item.image_text?item.image_text.split(','):[],
							price:item.price,
							name:item.name,
						})
					})
					this.dataAll.content = arr1
				})
			},
			confirm(){
				if(this.dataAll.name==""){
					this.http.toast("請輸入規格標題")
					return false
				}
				if(this.dataAll.content==""){
					this.http.toast("請至少新增一個規格内容")
					return false
				}
				let arr = JSON.parse(JSON.stringify(this.dataAll.content))
				arr.forEach(item=>{
					this.$set(item,"image",item.images.join())
					delete item.images
					delete item.image_arr
				})
				let datamsg = {
					shop_id: uni.getStorageSync("shop_id"), //店鋪id
					name:this.dataAll.name,
					num:this.dataAll.num,
					font_color:this.dataAll.font_color,
					content:arr,
					fh:this.dataAll.fh
				}
				let url = "/api/goods/addGgmb"
				if(this.listid){
					url = "/api/goods/editGgmb"
					this.$set(datamsg,"id",this.listid)
				}
				uni.showLoading({
					mask:true,
					title:"請稍後"
				})
				this.http.request(url, 'POST', datamsg).then(res=>{
					uni.hideLoading()
					if(res.code==1){
						this.http.toast(res.msg)
						setTimeout(()=>{
							uni.navigateBack(1)
						},1000)
					}else{
						this.http.toast(res.msg)
					}
				})
			},
			
			addAttr(arrtName) { //新增属性
				if (!arrtName) {
					this.http.toast("請先輸入規格内容！")
					return false
				}
				this.arrtName = ""
				this.dataAll.content.push({
					name: arrtName, //属性名称
					price: "", //价格
					images: [], //规格图片
					image_arr: [], //规格图片展示
				})
			},
			delAttr(value, i) {
				this.dataAll.content.splice(i, 1)
			},
			
			deleimage(i, upimg, arr) { //刪除图片
				upimg.splice(i, 1)
				arr.splice(i, 1)
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep.u-radio-group {
		flex: none !important;
	}
	.itemimgBox {
		width: auto;
		position: relative;
	}

	.names {
		width: 85%;
		border: 2rpx solid #ffb800;
		padding: 25rpx 30rpx;
		border-top-left-radius: 10rpx;
		border-bottom-left-radius: 10rpx;
		border-right: none;
	}

	.add {
		width: 15%;
		color: #333;
		background-color: #ffb800;
		padding: 29rpx 20rpx 32rpx 28rpx;
		border-top-right-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
		text-align: center;
		font-size: 28rpx;
	}

	.line {
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid RGBA(247, 247, 247, 1);
	}
</style>